<template>
	<view>
		<view class="info_list" v-for="(item1,index1) in info_list" key="index1">
			<view class="image"><image :src="item1.video"></image></view>
			<view class="center"><text class="name">{{item1.movie_name}}</text><view class="grade">点映评分<text class="comment">{{item1.comment_count}}</text></view></view>
			<view class="down"><view class="actor">{{item1.actor}}</view></view>
		</view>
		
		<view class="buy" v-for="(item2,index2) in buy_ticket" :key="index2">
			<view class="left">
				<view class="startTime">{{item2.startTime.slice(0,5)}}</view>
				<view class="endTime">{{item2.endTime.slice(0,5)}}散场</view>
			</view>
			<view class="next-left">
				<view class="language">{{item2.language}}</view>
				<view class="room">{{item2.room}}</view>
			</view>
			<view class="next-right">
				<view class="money"><text>￥{{item2.money}}</text>起</view>
			</view>
			<view class="right"><u-button @click="select_seat(item2.id)"><text>购票</text></u-button></view>
		</view>
		<view class="no_have" v-model="buy_ticket" v-if="buy_ticket==''" >
			<view class="info">
				<view class="today">今日暂无场次</view>
				<u-button @click="returnList()">查看其他电影</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info_list:[],
				buy_ticket:[],
			}
		},
		onLoad(options) {
			this.id = options.id;
			console.log('传过来的id值为：' + options.id);
			let that=this;
			uni.request({
				url:'http://www.moive.com/api/movie_mysql/buy_tiket_info.php',
				 method: 'GET',
				 data:{
					 id:that.id
				 },
				          success: (res)=>{				
					 that.info_list=res.data;
					 console.log( that.info_list);
						  },
				          fail: (err)=>{}
			}),
			uni.request({
				url:'http://www.moive.com/api/movie_mysql/buy_ticket.php',
				 method: 'GET',
				 data:{
					 id:that.id
				 },
				          success: (res)=>{				
					 // that.info_list=res.data;
					 that.buy_ticket=res.data;
					 // console.log( that.info_list);
					  console.log(that.buy_ticket);
						  },
				          fail: (err)=>{}
			})
		},
		methods: {
			
			returnList(){
				uni.navigateTo({
				    	url:"../homepange/homepange"
				    })
				
			},
			select_seat(id){
				let that=this;
				uni.navigateTo({
				    	url:"../homepange/selectSeat?id="+id+"&movie_name="+that.info_list.movie_name
				    })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
	background-color:#F5F5F5;
	}
.info_list{
	width:100%;
	height:250px;
	background-color: white;
}
.image{
	width:30%;
	height:150px;
	margin:0 auto;
	
}
.image image{
	width:100%;
	height:100%;
	margin-top:10px;
}
.center{
	text-align: center;
	width:100%;
	margin-top:20px;
}
.name{
	font-size: 15px;
}
.grade{
	font-size: 10px;
}
.comment{
	font-size: 15px;
	color:rgb(255,144,28);
}
.down{
	width:80%;
	margin:0 auto;
	margin-top:5px;
}
.actor{
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10px;
}
.buy{
	width:95.5%;
	height:80px;
	background-color: white;
	border-radius: 5px;
	margin:0 auto;
	margin-top: 8px;

}
.left{
	width:20%;
	height:100%;
	display: block;
	float:left;
}
.next-left{
	width:35%;
	height:100%;
	display: block;
	float:left;
}
.next-right{
	width:25%;
	height:100%;
	display: block;
	float:left;
}
.right{
	width:19%;
	height:100%;
	display: block;
	float:left;
}
.startTime{
	width:100%;
	height:40%;
	display: flex;
	margin-top:10px;
	justify-content: center;
	align-items: center;
}
.endTime{
	width:100%;
	height:60%;
	font-size: 10px;
	display: flex;
	justify-content: center;
	color:rgb(149,154,165);
}
.language{
	width:100%;
	height:34%;
	margin-top:15px;
}
.room{
	width:100%;
	height:60%;
	font-size: 10px;
	color:rgb(149,154,165);
}
.money{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	font-size: 14px;
	color:rgb(149,154,165);
}
.money text{
	color:rgb(241,84,170);
	font-size: 16px;
}
.right button{
	width:90%;
	height:30px;
	border-radius: 15px;
	border:1px rgb(241,84,170) solid;
	color:rgb(241,84,170);
	margin-top:25px;
	margin-left: 5%;
}
.right button text{
	width:100%;
	height:100%;
	margin-top: 8px;
	font-size: 15px;
}
.no_have{
	width:95%;
	height:200px;
	border-radius: 5px;
	background-color:white;
	margin-top: 10px;
	margin-left:2.5%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.info{
	width:80%;
	height:80px;
	
}
.today{
	width:100%;
	height:50%;
	font-size: 17px;
	color:rgb(149,154,165);
	text-align: center;
}
.info button{
	width:50%;
	height:30px;
	background-color: white;
	border:1px rgb(233,235,239) solid;
	border-radius: 20px;
	color:rgb(149,154,165);
}
</style>
